import { Ionicons } from "@expo/vector-icons";
import { Stack, useRouter } from "expo-router";
import React, { useState } from "react";
import {
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import ConfirmModal from "../components/confirmModal";

interface Employee {
  id: string;
  name: string;
  gender: "男" | "女";
  age: number;
  years: number;
  avatar: string;
}

const initialEmployees: Employee[] = [
  {
    id: "1",
    name: "张三",
    gender: "男",
    age: 28,
    years: 3,
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
  },
  {
    id: "2",
    name: "李四",
    gender: "女",
    age: 25,
    years: 2,
    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
  },
  {
    id: "3",
    name: "王五",
    gender: "男",
    age: 31,
    years: 5,
    avatar: "https://randomuser.me/api/portraits/men/45.jpg",
  },
];

export default function EmployeeListScreen() {
  const [employees, setEmployees] = useState<Employee[]>(initialEmployees);
  const [visible, setVisible] = useState<boolean>(false);
  const router = useRouter();

  const renderItem = ({ item }: { item: Employee }) => (
    <View style={styles.card}>
      <Image source={{ uri: item.avatar }} style={styles.avatar} />
      <View style={styles.info}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.subInfo}>
          {item.gender} · {item.age}岁 · 工龄{item.years}年
        </Text>
      </View>
      <View style={styles.actions}>
        <TouchableOpacity onPress={() => { }} style={styles.actionBtn}>
          <Text style={styles.actionText}>✏️</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {
          setVisible(true);
        }} style={styles.actionBtn}>
          <Text style={styles.actionText}>🗑️</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
<Stack.Screen
        options={{
          headerTitle: () => (
            <TouchableOpacity onPress={() => {
              setVisible(true);
            }}>
              <Text style={styles.headerStoreText}>{"测试"} ▼</Text>
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                router.push("/pages/AddEmployeeScreen");
              }}
            >
              <Ionicons name="add" size={26} style={{ marginRight: 12 }} />
            </TouchableOpacity>
          ),
        }}
      ></Stack.Screen>

      <FlatList
        data={employees}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={{ padding: 16 }}
      />
      <ConfirmModal
        visible={visible}
        title="提示"
        message="您确定要删除当前员工"
        onConfirm={() => {

        }}
        onCancle={() => {
          setVisible(false)
        }}></ConfirmModal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f6fa",
  },
   headerStoreText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  card: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 12,
    borderRadius: 12,
    marginBottom: 12,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
  },
  info: {
    flex: 1,
    marginLeft: 12,
  },
  name: {
    fontSize: 16,
    fontWeight: "bold",
  },
  subInfo: {
    fontSize: 12,
    color: "#555",
    marginTop: 4,
  },
  actions: {
    flexDirection: "row",
  },
  actionBtn: {
    marginLeft: 8,
  },
  actionText: {
    fontSize: 20,
  },
  fab: {
    position: "absolute",
    bottom: 30,
    right: 30,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: "#007bff",
    justifyContent: "center",
    alignItems: "center",
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
  },
  fabText: {
    fontSize: 28,
    color: "#fff",
    lineHeight: 28,
  },
});